import React, { Component } from 'react'
import {connect} from 'react-redux'

interface IProps{
    num:number
    itemKey:number
    groupKey:number
    changeNum:(num:number,groupKey:number,itemKey:number)=>void
}
class Computed extends Component<IProps>{
    // static defaultProps = {
    //     num:0,
    //     itemKey:0,
    //     groupKey:0
    // }
    render() {
        let {num} = this.props
        return (
            <div className="computed">
                <span 
                    className="dis fl"
                    onClick={this.changeNum.bind(this,false)}
                >-</span>
                <span className="num fl">{num}</span>
                <span 
                    className="add fl"
                    onClick={this.changeNum.bind(this,true)}
                >+</span>
            </div>
        )
    }
    changeNum(flag:boolean){
        let num = flag?(this.props.num+1):(this.props.num-1)
        let {groupKey,itemKey} = this.props
        this.props.changeNum(num,groupKey,itemKey)
    }
}
const mapToState = (state:any) => {
    return {}
}
const mapToDispatch = (dispatch:any) => {
    return {
        changeNum: (num:number,groupKey:number,itemKey:number) => {
            dispatch({type:"CHNAGE_NUM",num,groupKey,itemKey})
        }
    }
}
export default connect(mapToState,mapToDispatch)(Computed)